<template>
	<view class="uploading-box">
		<view class="uploading-img">
			<view class="uploading-img-item" v-for="(item,index) in modelValue" :key="index">
				<image @click="previewImage(item.url)" :src="item.url"
					mode="aspectFill">
				</image>
				<view class="form-close" @click="delimg(index)">
					<uni-icons type="closeempty" size="14" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
		<view class="uploading-text" @click="upload()">点击上传</view>
	</view>
</template>

<script>
	export default {
		name: "UploadPicture",
		props: {
			modelValue: {
				type: Array,
				default: []
			},
			count:{
				type:Number,
				default:9,
			},
			sizeType:{
				type:Array,
				default:['original','compressed'],
			},
			sourceType:{
				type:Array,
				default:['album'],
			}
		},
		data() {
			return {
				

			};
		},
		methods:{
			previewImage(item) {
				uni.previewImage({
					urls: [item] // 需要预览的图片http链接列表
				});
			},
			/**
			 * 删除图片
			 */
			delimg(i) {
				this.modelValue.splice(i, 1)
				this.$emit('update:modelValue', this.modelValue)
			},
			/**
			 * 上传
			 */
			upload(){
				uni.chooseImage({
					count:this.count,
					sizeType:this.sizeType,
					sourceType:this.sourceType,
					success:res=>{
						console.log(res.tempFilePaths)
						this.$emit('select',res.tempFilePaths)
					},
					fail:err=>{
					
					},
				});
			}
		},
		
	}
</script>

<style lang="scss">
	.uploading-box {
		// margin: 20rpx auto;
		margin: 0px auto;
		.uploading-text {
			width: 685rpx;
			height: 73rpx;
			background: rgba(236, 250, 245, 0);
			border-radius: 10rpx;
			border: 1px dashed #2cc396;
			text-align: center;
			line-height: 73rpx;
			color: #2cc396;
			margin: 0px auto;
		}
		.imglist {
			display: flex;
			flex-wrap: wrap;
			.imgbox {
				width: 685rpx;
				height: 73rpx;
				background: rgba(236, 250, 245, 0);
				border-radius: 10rpx;
				border: 1px solid #2cc396;
			}
		}
	}

	.uploading-img {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		.uploading-img-item {
			width: 210rpx;
			height: 210rpx;
			background-size: cover;
			position: relative;
			margin-bottom: 20rpx;
			margin-right: 20rpx;
			image{
				width: 100%;
				height: 100%;
			}
			&:nth-child(3n) {
				margin-right: 0px;
			}
			.form-head {
				width: 100%;
				height: 51rpx;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 0;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 29rpx;
				color: #ffffff;
			}
			.form-close {
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				width: 44rpx;
				height: 44rpx;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.uploading-img-1 {
			background-image: url(~@/static/caifa/form-1.jpg);
		}

		.uploading-img-2 {
			background-image: url(~@/static/caifa/form-2.jpg);
		}

		.uploading-img-3 {
			background-image: url(~@/static/caifa/form-3.jpg);
		}
	}

	.file-text {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 31rpx;
		color: #2cc396;
		width: 658rpx;
		height: 70rpx;
		background: rgba(236, 250, 245, 0);
		border-radius: 10rpx;
		border: 1px solid #2CC396;
		line-height: 70rpx;

	}
</style>